<template>
  <a-card v-if="loading == false" class="cardBox mytask_undo_operate_div" :bordered="false">
    <div slot="title" class="title">
      <page-header-wrapper :title="false"></page-header-wrapper>
    </div>
    <div>
      <a-tabs v-model="key" @change="tabChange">
        <a-tab-pane key="1">
          <div slot="tab">案件详情</div>
        </a-tab-pane>
        <a-tab-pane key="2">
          <div slot="tab">案件材料</div>
        </a-tab-pane>
        <a-tab-pane key="3">
          <div slot="tab">办案程序</div>
        </a-tab-pane>
        <a-tab-pane key="4" v-if="$route.params.isShowArchive">
          <div slot="tab">案件归档</div>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="algin_top_justify_center">
      <!-- <transition name="fade"> -->
      <div style="overflow: hidden; transition: width 0.5s ease-in-out" :style="{ width: hide ? '30%' : 0 }">
        <div class="timeLineArea" style="background-color: #fff; margin-top: 20px">
          <img class="icon" v-if="hide" @click="handleClickShrinkButton" src="@/assets/images/shrink.png" alt="" />

          <WF_MYTASKUNDORECORD
            ref="Wf_MyTaskUndoRecordRef"
            width="100%"
            :showChart="false"
            :autoCreated="true"
            :processinstanceid="$route.params.processinstanceid"
          />
        </div>
      </div>
      <!-- </transition> -->
      <div class="flex-item-2" style="width: 70%; height: 75vh; overflow: auto">
        <img style="cursor: pointer;" class="icon1" v-if="!hide" @click="handleClickShrinkButton" src="@/assets/images/unfold.png" alt="" />
        <!-- <a-icon
          class="icon"
          v-if="hide"
          @click="handleClickShrinkButton"
          :style="{ fontSize: '18px' }"
          type="menu-fold"
        />
        <a-icon class="icon" v-else @click="handleClickShrinkButton" :style="{ fontSize: '18px' }" type="menu-unfold" /> -->

        <div class="formBox" v-if="key == '1'">
          <TaskFormView
            style="width: 100%"
            ref="formView"
            @fGetEnclosure="sGetEnclosure"
            @f_SetFormData="s_SetFormData"
            @f_getStepBtnList="s_getStepBtnList"
            :pattern="Number($route.params.pattern)"
            :applyid="$route.params.faapplyid || $route.params.applyid"
          ></TaskFormView>
        </div>
        <div v-else-if="key == '2'">
          <preFile
            style="width: 100%"
            ref="preFile"
            :applyid="$route.params.faapplyid || $route.params.applyid"
            :taskid="$route.params.taskid"
            :category="$route.params.category"
            :isEdit="[3, 5].includes(Number($route.params.pattern))"
            :tabLists="Array('applicant')"
            :isShowTypical="false"
            @openReview="openReview"
            @onClose="closeReview"
          />

          <div class="file_part">
            <div class="file_head_div">
              <div class="file_head_title">
                <a-icon type="profile" :style="{ color: '#08c', marginRight: '10px' }" />
                审批表材料
              </div>
            </div>
            <a-divider></a-divider>
            <LogPaperwork class="paperwork_div" :applyid="$route.params.faapplyid || $route.params.applyid" />
          </div>
        </div>
        <div v-else-if="key == '3'">
          <SuperviseTab
            style="width: 100%"
            ref="superviseTab"
            :applyid="$route.params.faapplyid || $route.params.applyid"
            :category="$route.params.category"
            :taskid="$route.params.taskid"
            :processinstanceid="$route.params.processinstanceid"
            :isEditModel="[3, 5].includes(Number($route.params.pattern))"
          >
          </SuperviseTab>
        </div>
        <div v-else-if="key == '4'">
          <ArchiveInfoDetail
            :applyid="$route.params.faapplyid || $route.params.applyid"
            :reason="$route.query.queryParam.reason"
            :taskid="this.$route.params.taskid"
            :processinstanceid="$route.params.processinstanceid"
            :instid="$route.query.queryParam.instid"
            :isEditVal="$route.query.queryParam.isEditVal"
            :isDocEditVal="$route.query.queryParam.isDocEditVal"
            :serviceType="St_serviceTypeValue.SUPERVISE"
          />
        </div>
        <!-- 系统栏按钮隐藏 -->
        <FormOperation
          v-if="
            !hideBtnList.includes($route.params.category) &&
            [3, 5].includes(Number(this.$route.params.pattern)) &&
            processState == true
          "
          ref="btnRef"
          :style="{ zIndex: operation_zindex }"
          :formid="this.$route.params.formid"
          :processinstanceid="this.$route.params.processinstanceid"
          :processdefinitionid="this.$route.params.processdefinitionid"
          :taskid="this.$route.params.taskid"
          :stepid="this.$route.params.stepid"
          :owner="this.$route.params.owner"
          :taskName="this.$route.params.taskName"
          :pattern="Number(this.$route.params.pattern)"
          :category="$route.params.category"
          @saveForm="saveForm"
          @f_pointTab="s_pointTab"
        />
      </div>
    </div>
  </a-card>
</template>

<script>
import { getProcessVariable, getHandleParams } from '@/api/workflow/wf_ProcessInstance.js'
import { copyValue } from '@/utils/formassembly/util.js'
import { Tp_categoryValue, hideThirdCategoryList, caseCategoryList } from '@/enumeration/Tp_category.js'
import { Tp_proctypeEnum } from '@/enumeration/Tp_proctype.js'
import { St_serviceTypeValue } from '@/enumeration/St_serviceType.js'
const hideBtnList = ['assignment', 'evidence', 'decision', 'rectify']
export default {
  data () {
    return {
      hideBtnList: hideBtnList, // 需要隐藏操作按钮的环节
      Tp_categoryValue: Tp_categoryValue, // 分类标识
      caseCategoryList: caseCategoryList, // 显示办案程序的分类标识
      hideThirdCategoryList: hideThirdCategoryList, // 隐藏第三人的流程标识
      St_serviceTypeValue: St_serviceTypeValue, // 业务类型
      processState: null, // 流程状态
      processNext: this.$route.query, // 流程下一步的信息
      loading: true, // 页面参数是否初始化完成
      modelKey: this.$route.params.modelKey,
      applyid: null, // 申请表id
      variableMap: {}, // 流程变量Map, 用来配置表达式
      isEmpty: false, // 空状态
      labelCol: { span: 6 }, // label宽
      wrapperCol: { span: 18 }, // 组件宽
      enclosureList: [], // 表单附件类型控件item
      key: '1', // 卡片切换key
      operation_zindex: 9,
      isBtn2Show: true, // 底部第二个按钮显示吗？默认会显示
      btn3Name: '', // 底部第三个按钮名称
      Tp_proctypeEnum: Tp_proctypeEnum,
      hide: false
    }
  },
  async created () {
    // 根据taskid查询页面参数
    await getHandleParams(this.$route.params.taskid)
      .then(res => {
        console.log('页面所需参数', res)
        if (res.code == 0 && res.data != null) {
          for (const key in res.data) {
            this.$route.params[key] = res.data[key]
          }
          this.processState = res.data.state
        } else {
          this.$message.error('查询处理页面所需要的参数失败!')
        }
      })
      .finally(() => {
        this.loading = false
      })
    this.findProcessVariable()
    this.$nextTick(() => {
      if (this.$refs.Wf_MyTaskUndoRecordRef) {
        this.$refs.Wf_MyTaskUndoRecordRef.getProcessingRecord()
      }
    })
    console.log('路由------', this.$route)
    console.log('路由参数------', this.$route.params)
    this.redirectTab()
  },
  mounted () {
    this.$nextTick(() => {
      if (this.$refs.Wf_MyTaskUndoRecordRef) {
        this.$refs.Wf_MyTaskUndoRecordRef.getProcessingRecord()
      }
    })
  },
  methods: {
    redirectTab () {
      // 归档页面默认跳转
      if (
        (this.$route.query && this.$route.query.queryParam && this.$route.query.queryParam.isShowArchive) ||
        this.$route.query.url.indexOf('ArchiveUndoList') > 0 ||
        this.$route.query.url.indexOf('ArchiveDoneList') > 0
      ) {
        this.key = '4'
        // 当前对象为空，则去缓存里拿取数据
        if (this.$route.query.queryParam == undefined || this.$route.query.queryParam === '[object Object]') {
          const archiveDataStr = localStorage.getItem('archiveData')
          const archiveData = JSON.parse(archiveDataStr)
          this.$route.query.queryParam = archiveData
          // console.log('路由参数final------', this.$route.query.queryParam)
          for (const key in this.$route.query.queryParam) {
            this.$route.params[key] = this.$route.query.queryParam[key]
          }
        } else {
          for (const key in this.$route.query.queryParam) {
            this.$route.params[key] = this.$route.query.queryParam[key]
          }
        }
      }
      // 其它页面跳转 toTabKey代表指定跳转tab
      if (this.$route.query && this.$route.query.queryParam && this.$route.query.queryParam.toTabKey) {
        this.key = this.$route.query.queryParam.toTabKey
      }
    },
    // 收缩左边图标
    handleClickShrinkButton () {
      // console.log('his.hide', this.hide)
      this.hide = !this.hide
    },

    // 子组件调用修改流程状态
    s_updateState (state) {
      // console.log('s_updateState', state)
      this.$route.params.state = true
      this.processState = state
    },
    // 鼠标点击复制内容
    copyClick (value) {
      if (copyValue(value)) {
        this.$message.success('复制成功')
      } else {
        this.$message.error('复制失败')
      }
    },
    // 查询流程变量, 用来配置表达式
    findProcessVariable () {
      getProcessVariable(this.$route.params.processinstanceid).then(res => {
        if (res.code == 0) {
          this.variableMap = res.data || {}
          // ^ 保存表单数据到Vuex
          this.$store.commit('setPrecessVariable', this.variableMap)
        }
      })
    },
    // 子组件调用, 切换显示的标签页
    s_pointTab (index) {
      this.key = index
      if (this.$refs.preFile) {
        this.$refs.preFile.onClose()
      }
    },
    // 找到按钮回显环节需要用到的id
    s_getStepBtnList (stepid) {
      console.log('管理员按钮', this.$route.params.pattern)
      this.$nextTick(() => {
        if (this.$refs.btnRef) {
          this.$refs.btnRef.getStepBtnList(stepid)
        }
      })
    },
    // 父表单组件调用, 给表单填写数据
    s_SetFormData (body) {
      this.$refs.btnRef.sSetFormData(body)
    },
    // 按钮组件_通过时保存表单数据
    saveForm () {
      // dom存在立马保存
      if (this.$refs.formView) {
        this.$refs.formView.saveForm(true)
      } else {
        // dom不存在切换回表单校验完再保存
        this.key = '1'
        setTimeout(() => {
          this.$refs.formView.saveForm(true)
        }, 1000)
      }
    },
    // 子组件找到的文件类型给值方法
    sGetEnclosure (list) {
      this.enclosureList = []
      list &&
        list.forEach(v => {
          const item = {}
          this.initItme(item, v)
          this.enclosureList.push(item)
        })
      // console.log('表单控件类型', this.enclosureList)
    },
    // 递归复制对象初始化
    initItme (item, v) {
      for (const key in v) {
        if (typeof v[key] === 'object') {
          const obj = {}
          item[key] = this.initItme(obj, v[key])
        } else {
          if (key == 'disabled') {
            item[key] = true
          }
          // 附件区域不允许添加
          else if (key == 'limit') {
            if (this.$route.params.taskid == 'undefined' || this.$route.params.taskid == undefined) {
              item[key] = 0
            }
          } else {
            item[key] = v[key]
          }
        }
      }
      return item
    },
    // tab切换事件
    async tabChange (key) {
      this.isEmpty = false
      console.log('选中', key)
      if (key == 3) {
        this.hide = true
      } else {
        this.hide = false
      }
      // if (key == '5') {
      //   this.$refs.Wf_MyTaskUndoRecordRef.getProcessingRecord()
      // }
    },
    // 返回按钮
    handleBack () {
      // console.log('返回', this.$route.query)
      if (this.$route.query.url) {
        if (this.$route.query.tabkey) {
          this.$router.push({
            path: this.$route.query.url,
            query: {
              queryParam: this.$route.query.queryParam,
              tabkey: this.$route.query.tabkey
            }
          })
        } else {
          this.$router.push({
            path: this.$route.query.url,
            query: {
              queryParam: this.$route.query.queryParam
            }
          })
        }
        // console.log('this.$route.query.queryParam',this.$route.query.queryParam);
      } else {
        this.$router.go(-1)
      }
    },
    openReview () {
      this.operation_zindex = 2000
    },
    closeReview () {
      this.operation_zindex = 9
    },
    // 查询当前的相似度数据
    getSimilarityModal () {
      this.$refs.similayModalRef.reloadModal()
    }
  },
  beforeDestroy () {
    // 任务组件处理销毁之前清除vuex缓存的表单数据, 防止下次审批时污染
    this.$store.state.Processform.formData = {}
  },
  // 依赖components
  components: {
    TaskFormView: () => import('@/views/workflow/Wf_TaskForm.vue'),
    FormOperation: () => import('@/views/workflow/Wf_FormOperation.vue'),
    WF_MYTASKUNDORECORD: () => import('@/views/workflow/Wf_MyTaskUndoRecord.vue'),
    PreFile: () => import('@/views/aprv/pre_trialFile.vue'),
    LogPaperwork: () => import('@/views/aprv/log_paperwork.vue'),
    ArchiveInfoDetail: () => import('@/views/archive/ArchiveInfoDetail.vue'),
    SuperviseTab: () => import('@/views/supervise/SuperviseTab.vue')
  }
}
</script>

<style lang="less" scoped>
.title_generateBtn {
  position: absolute;
  width: 200px;
  right: 225px;
}

.title_backBtn {
  position: absolute;
  width: 100px;
  right: 0;
}

.title_backBtn_div {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding-right: 40px;
}

.title_backBtn_material {
  display: block;
  font-size: 24px;
  margin-right: 20px;
  cursor: pointer;
}

.title_combination {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 80%;
}

.title {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
}

.title_prefix {
  margin-top: 0.2%;
  width: 4px;
  height: 17px;
  background-color: #5b79fb;
}

.title_center {
  margin-left: 0.5%;
  font-size: 1.2rem;
  font-family: Source Han Sans CN;
  font-weight: 550;
  color: #232323;
  letter-spacing: 2px;
}

.cardBox {
  position: relative;
  ::v-deep .ant-tabs-ink-bar {
    margin: 0px 6%;
    width: 50px !important;
  }
  ::v-deep .ant-card-head {
    padding: 0 10px;
  }
}

.emptyBox {
  position: absolute;
  top: 35%;
  left: 45%;
}

.recordBox {
  display: flex;
  justify-content: center;
}

.formBox,
.recordBox {
  height: 74.8vh;
  // overflow: auto;
  // border: 1px solid red;
}

.imgBox div {
  margin-top: 15px;
  margin-left: -50px;
  position: absolute;
  left: 0;
  top: 0;
}

.imgBox:active {
  opacity: 0.2;
}

.img {
  width: 70px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.imgBox {
  /* height: 300px; */
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
}

.algin_top_justify_center {
  // position: relative;
  display: flex;
  padding: 0px 10px 0px 15px;
  background-color: #f5f6f9;
}
.icon {
  position: absolute;
  right: 15px;
  top: 10px;
  // background-color: pink;
  z-index: 5;
  cursor: pointer;
}
// .icon1 {
//   position: absolute;
//   left: 55px;
//   top: 10px;
//   background-color: pink;
//   z-index: 1000;
// }
.flex-item-2 {
  background-color: #fff;
  // padding: 20px 20px 0px 15px;
  flex: 1;
  position: relative;
  margin: 20px;
}

.file_part {
  margin: 16px 0px 32px 0px;
  padding: 0px 16px;
}
.file_head_div {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.file_head_title {
  display: flex;
  align-items: center;
  width: 40%;

  font-family: PingFang SC;
  font-weight: bold;
  font-size: 18px;
  color: #000000;
  line-height: 5px;
}
.file_head_btn {
  display: flex;
  justify-content: flex-end;
  align-self: flex-end;
  width: 60%;
}
.cardBox > ::v-deep .ant-card-body {
  padding: 0 !important;
}

::v-deep .custom-tabs {
  height: 50px !important;
}
::v-deep .ant-tabs-nav-wrap {
  height: 60px;
}
::v-deep .ant-tabs-tab-active > div {
  margin-bottom: 10px;
}
.cardBox {
  ::v-deep .ant-breadcrumb {
    height: 25px;
    font-size: 16px !important;
    margin-left: -24px;
    margin-top: 10px;
  }
  ::v-deep .ant-card-head {
    border: none;
    padding: 10px 0px 0px 0px;
  }
  ::v-deep .ant-card-head-title {
    padding: 10px 0px 0px 16px;
  }

  ::v-deep .imageBox {
    margin-right: 20px !important;
  }
  ::v-deep .ant-card-body {
    padding: 0px 16px 36px 16px;
  }
  ::v-deep .ant-tabs-bar {
    margin-bottom: 0px;
  }
  ::v-deep .ant-breadcrumb-link {
    color: #000;
  }
  ::v-deep .ant-tabs-tab {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #000000;
    // margin-top: 10px;
    // margin-bottom: 50; /* 根据需要调整 */
  }
  ::v-deep .ant-tabs-nav-scroll {
    background: white;
    margin-left: 20px;
  }
  ::v-deep .ant-spin-container {
    background-color: #fff;
  }
}
.timeLineArea {
  position: relative;
}
.tabsBox {
  height: 72.8vh !important;
}

.paperwork_div {
  ::v-deep .ant-tabs-nav-scroll {
    background: white;
    margin-bottom: 10px;
    margin-left: 0px;
  }
  ::v-deep .ant-tabs-top-content {
    margin-top: 20px;
  }
  ::v-deep .ant-tabs-nav-container {
    height: 50px !important;
    border-bottom: 1px solid #f5f5f5;
  }
  ::v-deep .ant-tabs-tab {
    background-color: #fff !important;
    color: #000000 !important;
    // box-shadow: 0px 0px 46px 0px rgba(240, 240, 240, 0.44) !important;
    min-width: 140px !important;
    // text-align: center;
    height: 50px !important;
    // opacity: 0.65;
    line-height: 50px !important;
    padding: 0 !important;
  }
}

.mytask_undo_operate_div {
  ::v-deep .ant-pro-page-header-wrap-page-header-warp {
    padding: 0px 16px;
  }
  ::v-deep .ant-tabs-ink-bar {
    margin: 0px 3.5%;
    width: 50px !important;
  }

  .opeart_line_div {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    overflow: auto;
  }
  .tab_div {
    padding: 0px 16px;
    flex: 2;
  }

  .title_backBtn {
    display: flex;
    align-content: center;
    flex: 1;
    position: relative;
    justify-content: flex-end;
    padding-right: 20px;
    // flex-direction: column;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .title_backBtn_div {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    overflow: auto;
  }

  .title_backBtn_div_label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0px 10px;
    cursor: pointer;
    font-size: 16px;
  }

  .title_backBtn_material {
    margin-right: 10px;
  }
}
</style>
